import { LibAppView } from "@/lib";
import { Button, Table, Tag, App } from "antd";
import { useMemo, useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import SearchDialog from "../../Component/SearchDialog";
import ResourceStatus from "../../Component/ResourceStatus";
import type { FormInstance } from "antd/lib/form";

export const SelectArticleFormItem =  LibAppView.withService({
    reqEndPoints: [{
        endPoint: "article.config",
        name: "config"
    }],
})(({ onChange, value, form, ...props }: any) => {
    const [ open, setOpen ] = useState(false);
    const [ selectedList, setSelectedList ] = useState<any[]>(value || []);
    const app = App.useApp();
    const modal = app.modal;
    const intl = useIntl();
    const categoryList = useMemo(() => {
        const categoryData = (props.responseData as any).config?.data?.category || [];
        return categoryData;
    }, [props.responseData]);
    const artTypeList = useMemo(() => {
        return (props.responseData as any).config?.data?.actType || [];
    }, [props.responseData]);
    const SearchFields: Admin.IAdvancedField[] = useMemo(() =>([
        {
            type: "Select",
            label: "admin.pages.article.category",
            name: "categoryName",
            placeholder: "admin.layout.input.placeholder",
            props: { autoComplete: "off" },
            data: [{
                label: <FormattedMessage id="admin.pages.article.allCategory" />,
                value: null
            }, ...(categoryList || [])]
        },
        {
            type: "Select",
            label: "admin.pages.article.typeTile",
            name: "artType",
            placeholder: "admin.layout.input.placeholder",
            props: { autoComplete: "off" },
            data: [{
                label: <FormattedMessage id="admin.pages.article.allCategory" />,
                value: null
            }, ...(artTypeList || [])]
        }, {
            type: "Input",
            label: "admin.pages.article.title",
            name: "title",
            placeholder: "admin.layout.input.placeholder",
        }
    ]), [categoryList, artTypeList]);
    const tableColumns = useMemo(() => {
        return  [
        {
            title: <FormattedMessage id="admin.pages.article.title" />,
            dataIndex: "title",
            fixed: true
        },
        {
            title: <FormattedMessage id="admin.pages.article.category"/>,
            dataIndex: "categoryTitle",
            width: 140,
            fixed: false
        }, {
            title: <FormattedMessage id="admin.pages.article.typeTile"/>,
            dataIndex: "artTitle",
            width: 120,
            fixed: false
        },{
            title: <FormattedMessage id="admin.pages.menus.edit.status"/>,
            dataIndex: "status",
            width: 100,
            render: (status: number) => {
                return (<>
                    <ResourceStatus status={status} />
                </>);
            }
        }
        // , {
        //     title: "操作",
        //     dataIndex: "id",
        //     width: 60,
        //     render: (id: string) => {
        //         return (<Button type="link" onClick={() => {
        //             modal.confirm({
        //                 title: intl.formatMessage({id:"admin.layout.modal.question"}),
        //                 content: intl.formatMessage({id:"admin.layout.modal.delete.msg"}),
        //                 okText: intl.formatMessage({id:"admin.layout.modal.confirm"}),
        //                 cancelText: intl.formatMessage({id:"admin.layout.modal.cancel"}),
        //                 onOk: () => {
        //                     const newListData = selectedList.filter(item => item.id !== id);
        //                     setSelectedList(newListData);
        //                     typeof onChange === "function" && onChange(newListData);
        //                     form && (form as FormInstance).setFieldValue(props.name, newListData);
        //                 }
        //             });
        //         }}>删除</Button>)
        //     }
        // }
    ]
    }, [selectedList, form]);
    return (
        <div>
            <Button type="primary" onClick={() => {
                setOpen(true);
            }}>选择</Button>
            <Table dataSource={selectedList} columns={tableColumns} />
            <SearchDialog
                tableColumns={tableColumns}
                endPoint={{
                    endPoint: "article.importList",
                }}
                defaultSelectedList={selectedList}
                searchFields={ SearchFields ||[]}
                open={open}
                onConfirm={(listData: any[]) => {
                    setSelectedList(listData);
                    setOpen(false);
                    typeof onChange === "function" && onChange(listData);
                }}
                onCancel={() => setOpen(false)}
                width={800}
            />
        </div>
    );
});


export const SelectExpertFormItem =  LibAppView.withService({
    reqEndPoints: [],
})(({ onChange, value, form, ...props }: any) => {
    const [ open, setOpen ] = useState(false);
    const [ selectedList, setSelectedList ] = useState<any[]>(value || []);
    const app = App.useApp();
    const modal = app.modal;
    const intl = useIntl();

    const SearchFields: Admin.IAdvancedField[] = useMemo(() =>([
        { label: "名称", name: "name", type: "Input" }
    ]), []);
    const tableColumns = useMemo(() => {
        return  [{
            title: "专家分类",
            dataIndex: "categoryTitle",
            width: 100
        },{
            title: "姓名",
            dataIndex: "name",
            width: 100
        }, {
            title: "性别",
            dataIndex: "gender",
            width: 60,
            render: (v: string) => {
                return v === "male" ? '男' : '女'
            }
        },{
            title: "工作单位",
            dataIndex: "company"
        }, {
            title: "岗位职称",
            dataIndex: "ocupation",
        }, {
            title: "状态",
            dataIndex: "status",
            render: (status: number) => {
                return (<>
                    <ResourceStatus status={status} />
                </>);
            }
        }
        // ,{
        //     title: "操作",
        //     dataIndex: "id",
        //     width: 60,
        //     render: (id: string) => {
        //         return (<Button type="link" onClick={() => {
        //             modal.confirm({
        //                 title: intl.formatMessage({id:"admin.layout.modal.question"}),
        //                 content: intl.formatMessage({id:"admin.layout.modal.delete.msg"}),
        //                 okText: intl.formatMessage({id:"admin.layout.modal.confirm"}),
        //                 cancelText: intl.formatMessage({id:"admin.layout.modal.cancel"}),
        //                 onOk: () => {
        //                     const newListData = selectedList.filter(item => item.id !== id);
        //                     setSelectedList(newListData);
        //                     form && (form as FormInstance).setFieldValue(props.name, newListData);
        //                     //typeof onChange === "function" && onChange(newListData);
        //                 }
        //             });
        //         }}>删除</Button>)
        //     }
        // }
        ]
    }, [selectedList, form]);
    return (
        <div>
            <Button type="primary" onClick={() => {
                setOpen(true);
            }}>选择</Button>
            <Table dataSource={selectedList} columns={tableColumns} />
            <SearchDialog
                tableColumns={tableColumns}
                endPoint={{
                    endPoint: "resource.importList",
                }}
                defaultSelectedList={selectedList}
                searchFields={ SearchFields ||[]}
                open={open}
                onConfirm={(listData: any[]) => {
                    setSelectedList(listData);
                    setOpen(false);
                    form && (form as FormInstance).setFieldValue(props.name, listData);
                }}
                onCancel={() => setOpen(false)}
                width={800}
            /> 
        </div>
    );
});